<template>
  <view>
    <view class="search-box">
      <view style="flex:1">
        <uni-search-bar @confirm="searchKey" v-model="searchValue" placeholder="输入城市名搜索" clearButton="none" cancelButton="none"
          radius="100">
          <template #searchIcon>
            <img src="https://img.qumoyugo.com/webimgbg/pets-icon-search-fd-g.png" class="van-icon__image">
          </template>
        </uni-search-bar>
      </view>
      <view class="btn" @click="searchKey">搜索</view>
    </view>
    <indexed-list :options="cityList" :showSelect="false" nameKey="cityName" countKey="poiNum" @click="searchCity">
    </indexed-list>
  </view>
</template>

<script setup>
import { storage } from '@/utils/utils'
import { ref, getCurrentInstance } from 'vue'
import IndexedList from '@/components/indexBar/uni-indexed-list'
import { onLoad } from '@dcloudio/uni-app'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const cityList = ref([])
const searchValue = ref('')
const optionsPage = ref({})
onLoad((options) => {
  optionsPage.value = options
  initCityData()
})
const initCityData = () => {
  $https({
    url: '/green-book/city/list',
    type: '',
    data: {
      cityName: searchValue.value,
      tab: optionsPage.value.tab === 'scenicspot' ? 'sight' : optionsPage.value.tab
    }
  }).then(res => {
    if (res.code === 0) {
      const _arr = []
      const data = res.data
      for (const k in data) {
        _arr.push({
          letter: k,
          data: data[k]
        })
      }
      // console.log(_arr)
      cityList.value = _arr
    }
  })
}
const searchKey = () => {
  initCityData()
}
const searchCity = (obj) => {
  storage.set('searchCityKeyword', obj.name)
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
.city-item {
  display: flex;
  padding: 12px 60px 12px 12px;
  justify-content: space-between;
  font-size:13px;
  background-color: #ffffff;
}
.search-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
  .btn{
    width: 46px;
    text-align: center;
    padding-right: 10px;
  }
}
.van-icon__image{
  display: block;
  width: 16px;
  height: 16px;
  object-fit: contain;
}
:deep(.uni-searchbar__box){
  justify-content: start;
}
</style>
